<template>
  <u-popup :show="show" @open="open" round="16">
    <view class="box">
      <view class="close-ico"><u-icon name="close" @click="onClose"></u-icon></view>
      <!-- #ifdef MP-WEIXIN -->
      <view class="title">获取您的昵称、头像</view>
      <view class="explain">获取用户头像、昵称、手机号信息,主要用于完善个人资料,向用户提供更好使用体验</view>
      <!-- #endif -->
      <view class="cell">
        <view class="cell-item"><text class="cell-item-label">头像</text>
          <!-- #ifdef MP-WEIXIN -->
          <button open-type="chooseAvatar" @chooseavatar="chooseavatar">
            <u-avatar :src="form.avatar"></u-avatar>
          </button>
          <!-- #endif -->
        </view>
        <view class="cell-item"><text class="cell-item-label">昵称</text>
          <u--input placeholder="请输入昵称" border="none" type="nickname" v-model="form.nickname"></u--input>
        </view>
        <view class="cell-item"><text class="cell-item-label">手机号</text>
          <u-button :customStyle="{
            ...btnStyle,
            color: form.mobile ? '#000' : '#C0C4CC',
          }" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">{{ form.mobile || "点击获取手机号" }}</u-button>
        </view>
      </view>

      <u-button :customStyle="{
        width: '420rpx',
        height: '80rpx',
        borderRadius: '8rpx',
        backgroundColor: '#c5261d',
        color: '#fff',
        margin: '0 auto',
        marginBottom: '50rpx',
      }" @click="confirm">保存</u-button>
    </view>
  </u-popup>
</template>
<script>
import { mapState, mapActions } from "vuex";
import {
  updateUserInfoApi,
  wx_accountJMApi,
  getUserInfoRegisterApi,
} from "@/services/my";

export default {
  data() {
    return {
      datetimePickerShow: false,
      uploadHeadPortrait: false,
      actionList: [
        {
          name: "拍摄",
          fontSize: "20",
          index: 0,
        },
        {
          name: "从相册选取",
          fontSize: "20",
          index: 1,
        },
      ],
      show: false,
      form: {
        avatar: "",
        nickname: "",
        mobile: "",
      },

      inputCustomStyle: {
        textIndent: "32rpx",
        background: "#f5f5f5",
        height: "80rpx",
        // #ifdef MP-WEIXIN
        paddingLeft: "32rpx",
        // #endif
      },
      btnStyle: {
        border: "none",
        width: "100%",
        height: "95rpx",
        justifyContent: "flex-start",
        paddingLeft: "32rpx",
      },
      openid: "",
      session_key: "",
    };
  },

  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },

  methods: {
    ...mapActions({
      getUserInfo: "user/getUserInfo",
    }),
    async onGetPhoneNumber(e) {
      const { iv, encryptedData } = e.detail;
      const result = await wx_accountJMApi({
        session_key: this.session_key,
        encrypted: encryptedData,
        iv,
      });
      const { phoneNumber } = result.data?.xcx_info || {};
      this.form.mobile = phoneNumber;
    },
    showPopup(params) {
      const { openid, session_key } = params;
      this.openid = openid;
      this.session_key = session_key;
      this.show = true;
      // this.$nextTick(() => {
      //   this.form.avatar = this.userInfo.avatar;
      //   this.form.nickname = this.userInfo.nickname;
      // });
    },
    open() {
      // #ifdef H5
      // document.body.style.overflow = "hidden";
      // #endif
    },
    onClose() {
      this.show = false;
      // #ifdef H5
      document.body.style.overflow = "auto";
      // #endif
    },
    chooseavatar(e) {
      const imgUrl = e.detail.avatarUrl;
      this.uploadImg(imgUrl);
    },
    uploadImg(imgUrl) {
      this.$utils.uploadImg(imgUrl).then((res) => {
        const { fullurl } = res;
        this.form.avatar = fullurl;
      });
    },
    confirm() {
      const { avatar, nickname, mobile, } = this.form;
      if (!avatar) {
        this.$u.toast("请上传头像");
        return;
      }
      if (!nickname) {
        this.$u.toast("昵称不能为空");
        return;
      }
      if (!mobile) {
        this.$u.toast("手机号不能为空");
        return;
      }
      getUserInfoRegisterApi({ ...this.form, openid: this.openid }).then(
        (res) => {
          if (res.code == 1) {
            const { token } = res.data?.userinfo;
            uni.setStorageSync("token", token);
            this.$store.dispatch("user/getUserInfo");
            this.show = false;
            uni.switchTab({
              url: "/pages/home/home",
            });
          } else {
            setTimeout(() => {
              this.$u.toast(res.msg);
            }, 0);
          }
        }
      );
    },
    changeAvatar() { },
  },
};
</script>

<style scoped lang="scss">
.box {
  padding-top: 40rpx;
  position: relative;

  .close-ico {
    display: flex;
    justify-content: flex-end;
    padding-right: 30rpx;
    position: absolute;
    top: 45rpx;
    right: 0rpx;
  }

  .title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 45rpx;
    font-weight: bold;
  }

  .explain {
    font-size: 28rpx;
    font-weight: 500;
    color: $u-info;
    margin-top: 24rpx;
    margin-bottom: 66rpx;
    padding: 0 23rpx;
    text-align: center;
  }

  .cell {
    padding: 0 64rpx;
    margin-bottom: 52rpx;

    &-item {
      border-bottom: 1px solid #f5f5f5;
      height: 108rpx;
      font-size: 32rpx;
      display: flex;
      align-items: center;

      &-label {
        width: 160rpx;
        // margin-right: 48rpx;
        white-space: nowrap;
      }
    }
  }

  .form {
    padding: 0 32rpx;

    &>view {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      margin-bottom: 32rpx;

      &>text {
        width: 180rpx;
      }

      &>.input {
        flex: 1;
      }
    }

    .confirm-btn {
      margin-top: 60rpx;
      width: 686rpx;
    }
  }
}
</style>
